<template>
  <div v-show="visible"  >
    <div >
      <transition v-show="visible" name="van-fade">
        <div id="mainhead" >
          <NavBar @showpop="showpop()" :navinfo="navinfo"></NavBar>
        </div>
      </transition>
      <div id="main" class="c-f" :style="{'max-height':slide_h}" style="overflow-y: auto">
        <div v-if="data!=null">
            <transition  name="van-fade">
              <div   id="imageUpload" class="text-center p-tb10">
                <van-uploader :before-read="beforeRead" :after-read="onRead" @oversize="oversize" :max-size="(1024*1024*2)" accept=" image/jpeg,image/png">
                  <img v-if="data.headImage"  :src="proAPI.RESOURCE_URL+data.headImage" class="el-upload--picture">
                  <img v-else :src="defaultImage" />
                </van-uploader>
              </div>
            </transition>
            <van-field  input-align="right" disabled="true" label="账号" v-model="data.userName" />
            <van-field  input-align="right" clearable label="昵称" v-model="data.nickName" />
            <van-cell  @click="showSexChoose(data.sex)"  title="性别" :value="proUtil.determineSex(data.sex)" />
            <van-field  input-align="right" clearable label="年龄" type="number" v-model="data.age" />
            <van-field  input-align="right" clearable label="简介" v-model="data.desc" />
            <van-field  input-align="right" disabled="true" label="账号状态" v-model="data.state==0?'正常':'已锁定'" />
            <van-field  input-align="right" clearable label="手机号" v-model="data.mobile" />
            <van-field  input-align="right" clearable label="电子邮箱" v-model="data.email" />
            <van-field  input-align="right" clearable label="QQ" v-model="data.qq" />
            <van-field  input-align="right" clearable label="联系地址" v-model="data.address" />
            <van-field  input-align="right" disabled="true" label="注册时间" v-model="data.createTime" />
            <van-field  input-align="right" disabled="true" label="本次登陆时间" v-model="data.currentLoginTime" />
            <van-field  input-align="right" disabled="true" label="上次登陆时间" v-model="data.lastLoginTime" />
        </div>
        <div class="p-tb20"></div>
        <!--<van-cell-group>-->
        <!--<van-field-->
        <!--v-model="username"-->
        <!--required-->
        <!--clearable-->
        <!--label="用户名"-->
        <!--right-icon="question-o"-->
        <!--placeholder="请输入用户名"-->
        <!--@click-right-icon="$toast('question')"-->
        <!--/>-->
        <!--<van-field-->
        <!--v-model="username"-->
        <!--required-->
        <!--clearable-->
        <!--label="昵称"-->
        <!--right-icon="question-o"-->
        <!--placeholder="请输入昵称"-->
        <!--@click-right-icon="$toast('question')"-->
        <!--/>-->
        <!--<van-field-->
        <!--v-model="username"-->
        <!--required-->
        <!--clearable-->
        <!--label="昵称"-->
        <!--right-icon="question-o"-->
        <!--placeholder="请输入昵称"-->
        <!--@click-right-icon="$toast('question')"-->
        <!--/>-->
        <!--</van-cell-group>-->
      </div>
    </div>
    <van-action-sheet
      v-model="actionshow"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>
<script>
  import defaultImage from '../../../../static/img/defaultHead.jpg';
  const NavBar = () =>
    import ('@/components/header/NavBar');
  export default {
    components: {
      'NavBar': NavBar,
    },
    data() {
      return {
        defaultImage:defaultImage,
        visible: false,
        navinfo: {
          title: '个人资料',
          leftText: '返回',
          leftIcon: '',
          leftLink: '',
          rightText: '保存',
          rightIcon: '',
          rightLink: 'showpop'
        },
        actionshow:false,
        actions: [
          {name: '性别选择', value:0,disabled:true},
          {name: '男', value:1},
          {name: '女', value: 2},
          {name: '保密',value: 0}
        ],
        slide_h: (window.document.body.offsetHeight - 50) + "px",
        popshow: false,
        agentApplyInfo:null,
        data:null
      }
    },
    methods: {
      init() {
        this.$store.commit("saveLoadingMap", {
          "target": this.proAPI.URLS.getMemberUserBaseInfoVo,
          lock: 1
        });
        this.proAPI.getJson(this.proAPI.URLS.getMemberUserBaseInfoVo).then((res) => {
          this.$store.commit("saveUser", res.data);
          this.data = this.proUtil.base64decode(res.data);
        })
      },
      submitForm() {
        this.$store.commit("saveLoadingMap", {
          "target": this.proAPI.URLS.modifyMemberUserBaseInfo,
          lock: 1
        });
        this.proAPI.postJson(this.proAPI.URLS.modifyMemberUserBaseInfo,this.data).then((res) => {
          this.$store.commit("saveUser", this.proUtil.base64encode(JSON.stringify(this.data)));
          this.data = this.$store.getters.getUserInfo;
          this.proUtil.msgSuccess(res.message);
        })
      },
      showpop() {
        this.submitForm();
      },
      showSexChoose(){
        this.actionshow = true;
      },
      onSelect(item){
          console.log(item);
          this.actionshow = false;
          this.data.sex = item.value;
      },
      beforeRead(){
        // alert(33);
        if(window.webViewJs2Java){
          console.log("如果是android移动端暂时不处理");
          return;
        }else{
          // alert(333);
        }
      },
      onRead(file) {
        console.log(file);
        let formData = new FormData();
        formData.append('file', file.file);
        this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.uploadSingleHeadImage,id:this.target});
        this.proAPI.postFile(this.proAPI.URLS.uploadSingleHeadImage, formData).then(res => {
          this.data.thumbNailImage = res.data.thumbNailImagePath;
          this.data.headImage = res.data.imagePath;
        })
      },
      oversize(msg){
        this.proUtil.msgWarning('图片大小不能超过 2MB!');
      }
    },
    beforeCreate: function () {
    },
    created: function () {
    },
    beforeMount: function () {
    },
    mounted: function () {
      setTimeout(() => {
        this.init();
        this.visible = true;
      }, 500)
    },
    beforeUpdate: function () {
    },
    updated: function () {
    },
    activated: function () {
    },
    deactivated: function () {
    },
    beforeDestroy: function () {
    },
    destroyed: function () {
    },
    errorCaptured: function (err, vm, info) {
    }
  }
</script>
<style scoped>
  .circle {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    font-size: 16px
  }
  .numpanel {
    width: 40;
    height: 40px;
    margin-right: 5px;
  }
  #imageUpload >>> img{
    background-color: #fbfdff;
    border-radius: 50%;
    box-sizing: border-box;
    width: 84px;
    height: 84px;
    line-height: 64px;
    vertical-align: top;
  }
  .van-cell:not(:last-child)::after {
    right:15px;
  }
</style>
